<template>
    <div class="head-portrait">
    </div>
    <div class="document">
        <van-row justify="center">
            <van-col span="24">
                <van-image
                    round
                    width="5rem"
                    height="5rem"
                    :src="userData.img"
                />
                <p class="cardTitle">
                    <span v-if="!isLogin" @click="toLogin">登陆/注册</span>
                    <span>{{ userData.name }}</span></p>
                <p class="explain">
                    <span>关注:12312</span>&nbsp&nbsp
                    <span>粉丝:1231</span>
                </p>
            </van-col>
        </van-row>
    </div>
    <div class="mid">
        <van-cell-group>
            <van-cell v-for="(item, index) in midData" :key="index" :title="item.title" :icon="item.icon" :to="item.path" is-link @click="outLogin(item.title)"/>
        </van-cell-group>
    </div>
</template>

<script>
import {getInfo} from '../../request/api/mineApi'
import { Toast } from "vant"

export default {
    name: 'mine',
    components: {},
    data() {
        return {
            userData: {
                phone: '',
                img: require('../../assets/moren.webp'),
                name: '',
                sex: ''
            },
            midData: [
                { title: '我的关注', icon: 'shield-o', path: '' },
                { title: '我的咨询', icon: 'phone-o', path: '' },
                { title: '帮助中心', icon: 'friends-o', path: '' },
                { title: '设置', icon: 'location-o', path: '/setup' },
                { title: '退出登录', icon: 'replay', path: ''},
            ],
            isLogin: false
        }
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        toLogin() {
            this.$router.push({name: 'login'})
        },
        // 读取用户信息
        async getUserInfo() {
            this.isLogin = JSON.parse(sessionStorage.getItem('isLogin'))
            if (this.isLogin) {
                Toast.loading({
                    duration: 0, // 持续展示 toast
                    message: '加载中...',
                    forbidClick: true,
                })
                let id = JSON.parse(sessionStorage.getItem('user')).id
                const { data } = await getInfo({id})
                if (data) {
                    if (data.code === 0) {
                        this.userData = data.userobj
                        Toast.clear()
                    }
                } else {
                    Toast.clear()
                    Toast.fail(res.msg)
                }
            }
        },
        outLogin(title) {
            if (title == '退出登录') {
                sessionStorage.clear()
                this.$router.push({path: '/login'})
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.head-portrait {
    // padding: 40px 10px 6px;
    // margin-bottom: 40px;
    border-radius: 0 0 10px 10px;
    // background: #fff;

    .van-row {
        align-items: center;
        .van-col {
            display: flex;
            align-items: center;
        }
    }
}
.document {
    width: 100%;
    height: 120px;
    padding: 20px;
    top: 120px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 10px;
    border-radius: 10px;
    position: relative;
    .van-row {
        overflow: hidden;
        text-align: center;
        .van-col {
            position: absolute;
            top:-40px;
            .van-field {
                border: 1px solid red;
            }
        }
       
    }
}
.mid {
    margin-top: 130px;
    margin-bottom: 10px;
    .van-cell-group {
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
}
.cardTitle {
    text-align: center;
    margin: 6px auto 8px;
    font-size: 18px;
    font-weight: 600;
}
.explain {
    font-size: 14px;
    color: #666;
}
</style>